<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>OAL</title>
    <link rel="stylesheet" href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet"  href="../../common/css/daterangepicker.min.css">
    <link rel="stylesheet"  href="../../common/css/icheck-skins/square/blue.css">
    <link rel="stylesheet" href="../../common/css/bootstrap-spinner.min.css" >
    <link rel="stylesheet" href="../../common/css/sweetalert.css" >
    <link rel="stylesheet" href="../../common/css/bootstrap-combobox.css" >
    <link rel="stylesheet" href="../../common/css/standard.css">
</head>

<body class="booking-form-body">
<div class="page-mask"></div>
<div class="oal-page">
    <!--Content -->
    <div class="oal-page-content-section">
        <!-- Header -->
        <!-- Content -->
        <div class="oal-form-content">
                <div class="oal-page-content-booking-section">
                    <div class="oal-form-content-center-section oal-box-shadow">
                        <div class="oal-booking-form-title">
                            Instant Booking
                        </div>
                        <div class="booking-form-frame">
                            <div class="oal-booking-section">
                                <!--Create Booking -->
                                        <form class="form-horizontal" role="form">
                                            <div class="row row-booking-party">
                                                <div class="col-lg-2 col-md-2 col-sm-2">
                                                    <div class="booking-party-group">
                                                        <label class="control-label">Booking Party:</label>
                                                        <div >
                                                            <input type="text" id="book_ID"  class="form-control" placeholder="CPF ID" data-toggle="popover" data-content="Input CPF ID for the Booking Party.">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-3 col-md-3 col-sm-3">
                                                    <div class="booking-party-group">
                                                        <label class="control-label">&nbsp;</label>
                                                        <input type="text" class="form-control disabled " placeholder="Company Name">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                        <label class="control-label">Agreement Number:</label>
                                                    <!--<div class="input-group">-->
                                                        <!--<input type="text" class="form-control" id="txtagrrmentno" placeholder="Agreement No.">-->
                                                            <select id="txtagrrmentno" class="combobox">
                                                                <option value="PA" description="111">Pennsylvania</option>
                                                                <option value="CT" description="c2">Connecticut</option>
                                                                <option value="NY" description="3333">New York</option>
                                                                <option value="MD" description="444t">Maryland</option>
                                                                <option value="VA" description="555qq">Virginia</option>
                                                            </select>
                                                            <!--<span class="input-group-addon required">*</span>-->
                                                    <!--   </div>-->

                                               </div>
                                           </div>

                                           <div class="row">
                                               <div class="col-lg-12 col-md-12 col-sm-12 booking-info-group">
                                                   <div class="row">
                                                       <div class="col-lg-5 col-md-5 col-sm-5 booking-form-od-group">
                                                               <input type="text" class="form-control require-field" id="search_por" placeholder="Origin"  data-toggle="popover" data-content="As your specified origin is not within England or Wales, our operatives have been notified and will review your request.">


                                                           <div class="booking-haulage-group text-right">
                                                               <label class="label-haulage"><input type="radio" name="rdOBhaulage" value="CY">&nbsp;&nbsp;CY</label>
                                                               <label class="label-haulage"><input type="radio" name="rdOBhaulage" value="Door" checked>&nbsp;&nbsp;Door</label>
                                                           </div>
                                                       </div>
                                                       <div class="col-lg-2 col-md-2 col-sm-2">
                                                           <div class="booking-form-od-arrow-margin"></div>
                                                           <div class="oal-booking-preview-arrow-box"></div>
                                                       </div>
                                                       <div class="col-lg-5 col-md-5 col-sm-5 booking-form-od-group">
                                                           <div class="input-group">
                                                               <input type="text" class="form-control" id="search_fnd" placeholder="Destination">
                                                               <span class="input-group-addon required">*</span>
                                                           </div>
                                                           <div class="booking-haulage-group text-right">
                                                               <label class="label-haulage"><input type="radio" name="rdIBhaulage" value="CY" checked>&nbsp;&nbsp;CY</label>
                                                               <label class="label-haulage"><input type="radio" name="rdIBhaulage" value="Door">&nbsp;&nbsp;Door</label>
                                                           </div>
                                                       </div>
                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-5 col-md-5 col-sm-5">
                                                           <div class="booking-form-row-margin">
                                                               <label class="control-label">Cargo Nature:</label>
                                                               <select class="form-control" id="cargo_nature">
                                                                   <option value="GC">General</option>
                                                                   <option value="DG">Dangerous</option>
                                                                   <option value="RF">Reefer</option>
                                                                   <option value="AW">Awkward</option>
                                                               </select>
                                                               <div id="row_cargo_nature_detail" class="row-cargo-nature-detail">
                                                                   <textarea id="cargo_nature_detail"  class="form-control" rows="3" data-toggle="popover"></textarea>

                                                                   <br/>
                                                               </div>
                                                           </div>
                                                       </div>
                                                       <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                       <div class="col-lg-5 col-md-5 col-sm-5">
                                                           <div class="booking-form-row-margin">
                                                               <label class="control-label text-nowrap">Contract Commodity:</label>
                                                               <select class="form-control" id="contract_commodity" data-tiggle="popover" data-placement="top" data-content="Contract Commodity" >
                                                                   <option>Steel Drilling Equip</option>
                                                                   <option>Scrap metal / General</option>
                                                               </select>
                                                               <div class="row-booking-commodity">
                                                                   <div class="input-group">
                                                                       <input type="text" class="form-control" id="bk_commodity" placeholder="Booking Commodity" data-tiggle="popover" data-placement="top" data-content="Please provide a detailed description of your commodity." >
                                                                       <span class="input-group-addon required">*</span>
                                                                   </div>
                                                                   <div id="warning_booking_commodity" class="quote-vessel-validation quote-vessel-validation-layout">
                                                                       <p>This contract applies only for recycled cargo. Please confirm that you wish to proceed given your current commodity, or otherwise change your commodity and/or contract to match before proceeding.</p>
                                                                       <p class="text-center"><a class="btn btn-default" href="javascript:void(0);">Proceed</a></p>
                                                                   </div>
                                                                   <div class="error-field-icon">
                                                                       <i class="fa fa-exclamation-triangle"></i>
                                                                   </div>
                                                               </div>
                                                           </div>
                                                       </div>

                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-5 col-md-5 col-sm-5">
                                                           <div class="booking-form-row-margin" id="row_special_request">
                                                               <label class="control-label">Special Haulage: </label>
                                                               <div class="booking-container-special-requirement">
                                                                   <label class="col-lg-6 col-md-6 col-sm-6"><input type="checkbox" name="rdSpecialHaulage">&nbsp;&nbsp;Changeover</label>

                                                                   <label class="col-lg-6 col-md-6 col-sm-6"><input type="checkbox" name="rdSpecialHaulage">&nbsp;&nbsp;Double Collection</label>

                                                                   <label class="col-lg-6 col-md-6 col-sm-6"><input type="checkbox" name="rdSpecialHaulage">&nbsp;&nbsp;Drop and Collect</label>

                                                                   <label class="col-lg-6 col-md-6 col-sm-6"><input type="checkbox" name="rdSpecialHaulage">&nbsp;&nbsp;Container Lift</label>
                                                               </div>

                                                           </div>
                                                       </div>
                                                       <div class="col-lg-2 col-md-2 col-sm-2"></div>


                                                       <div class="col-lg-5 col-md-5 col-sm-5">
                                                           <div class="booking-form-row-margin" id="row_shipping_date">
                                                               <label class="control-label">Preferred Shipping Date:</label>
                                                               <div>
                                                                   <label class="shipping-date-type"><input type="radio" name="rdshippingdatetype" value="arrival">&nbsp;&nbsp;Arrival Date</label>
                                                                   <label class="shipping-date-type"><input type="radio" name="rdshippingdatetype" value="vanning" checked>&nbsp;&nbsp;Vanning Date</label>
                                                                   <label class="shipping-date-type"><input type="radio" name="rdshippingdatetype" value="sailing">&nbsp;&nbsp;Sailing Date</label>

                                                                   <div class="booking-form-row-margin">
                                                                       <div class="input-group oal-datepicker">
                                                                           <input id="shipping_date" type="text" class="form-control date-time-box"  value="" placeholder="">
                                                                       <span class="input-group-addon">
                                                                           <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                       </span>
                                                                       </div>
                                                                   </div>
                                                               </div>

                                                           </div>

                                                       </div>
                                                   </div>
                                               </div>
                                           </div>
                                           <div class="row row-container-vessel">
                                               <div class="container-panel container-collapsed">
                                                   <div class="row">
                                                       <div class="col-lg-12 col-md-12 sm-12 container-group-border">
                                                           <div class="row">
                                                               <div class="col-lg-3 col-md-3 sm-3 text-right container-type-label text-nowrap container-type-margin">Container Type:</div>
                                                               <div class="col-lg-7 col-md-7 sm-7">
                                                                   <div class="row container-type-label">
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap"><input type="checkbox" checked name="cb_container_type" id="cb_container_gp20">&nbsp;&nbsp;20GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap"><input type="checkbox" checked name="cb_container_type" id="cb_container_gp40">&nbsp;&nbsp;40GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap"><input type="checkbox" name="cb_container_type" id="cb_container_gp45">&nbsp;&nbsp;45GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap"><input type="checkbox" name="cb_container_type" id="cb_container_hq45">&nbsp;&nbsp;45HQ</label>

                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;20GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;40GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;45GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;45HQ</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;20GP</label>
                                                                       <label class="col-lg-3 col-md-3 col-sm-3 text-nowrap more-container-type"><input type="checkbox" name="cb_container_type">&nbsp;&nbsp;40GP</label>
                                                                   </div>
                                                               </div>
                                                               <div class="col-lg-2 col-md-2 sm-2 "><a href="javascript:void(0);" id="lnk_more_conatiner_type"><i class="fa fa-circle-plus"></i> More</a></div>
                                                           </div>

                                                       </div>

                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-12 col-md-12 sm-12 container-list">
                                                           <div class="row">
                                                               <div class="col-lg-12 col-md-12 sm-12 booking-form-container" id="container_gp20">
                                                                   <div class="row header-row">
                                                                       <div class="col-lg-4  col-sm-4 col-md-4">
                                                                           <div class="container-type-icon text-center">
                                                                               <span class="oal-booking-container-type-title">20 GP</span>
                                                                           </div>
                                                                           <div class="container-type-count">
                                                                               <i class="fa fa-times"></i>
                                                                           </div>
                                                                       </div>
                                                                       <div class="col-lg-2  col-sm-2 col-md-2">
                                                                           <div class="input-group spinner" data-trigger="spinner">
                                                                               <input type="text" class="form-control text-right" value="2" data-rule="quantity" data-min="0" data-max="99">
                                                                         <span class="input-group-addon">
                                                                           <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                                           <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                                         </span>
                                                                           </div>
                                                                       </div>
                                                                       <div class="col-lg-6  col-sm-6 col-md-6">
                                                                           <div class="input-group container-weight">
                                                                               <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="per Container">
                                                                               <div class="input-group-btn">
                                                                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="required">*&nbsp;</span>KGs <span class="caret"></span></button>
                                                                                   <ul class="dropdown-menu weight-unit">
                                                                                       <li><a href="javascript:void(0);">KGs</a></li>
                                                                                       <li><a href="javascript:void(0);">Pounds</a></li>
                                                                                       <li><a href="javascript:void(0);">Tons</a></li>
                                                                                   </ul>
                                                                               </div>
                                                                               <div class="quote-error-message quote-error-message-layout">The weight exceeds container payload. Please enter the weight less than 25 Tons.</div>
                                                                           </div>

                                                                       </div>

                                                                   </div>
                                                                   <div class="row container-truck-info">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                                   <div class="row container-truck-info">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                               </div>
                                                               <div class="col-lg-12 col-md-12 sm-12 booking-form-container" id="container_gp40">
                                                                   <div class="row header-row">
                                                                       <div class="col-lg-4  col-sm-4 col-md-4">
                                                                           <div class="container-type-icon text-center">
                                                                               <span class="oal-booking-container-type-title">40 GP</span>
                                                                           </div>
                                                                           <div class="container-type-count">
                                                                               <i class="fa fa-times"></i>
                                                                           </div>

                                                                       </div>
                                                                       <div class="col-lg-3  col-sm-3 col-md-3 col-xs-3"><div class="input-group spinner" data-trigger="spinner">
                                                                           <input type="text" class="form-control text-right" value="3" data-rule="quantity" data-min="0" data-max="99">
                                                                     <span class="input-group-addon">
                                                                       <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                                       <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                                     </span>
                                                                       </div>
                                                                       </div>
                                                                       <div class="col-lg-5  col-sm-5 col-md-5 col-xs-5">
                                                                           <div class="input-group container-weight">
                                                                               <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="per Container">
                                                                               <div class="input-group-btn">
                                                                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs <span class="caret"></span></button>
                                                                                   <ul class="dropdown-menu weight-unit">
                                                                                       <li><a href="javascript:void(0);">KGs</a></li>
                                                                                       <li><a href="javascript:void(0);">Pounds</a></li>
                                                                                       <li><a href="javascript:void(0);">Tons</a></li>
                                                                                   </ul>
                                                                               </div>
                                                                               <div class="quote-error-message quote-error-message-layout">The weight exceeds container payload. Please enter the weight less than 25 Tons.</div>
                                                                           </div>
                                                                       </div>

                                                                   </div>
                                                                   <div class="row container-truck-info">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                                   <div class="row container-truck-info">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                                   <div class="row container-truck-info">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                               </div>
                                                               <div class="col-lg-12 col-md-12 sm-12 booking-form-container" id="container_gp45">
                                                                   <div class="row header-row">
                                                                       <div class="col-lg-4  col-sm-4 col-md-4">
                                                                           <div class="container-type-icon text-center">
                                                                               <span class="oal-booking-container-type-title">45 GP</span>
                                                                           </div>
                                                                           <div class="container-type-count">
                                                                               <i class="fa fa-times"></i>
                                                                           </div>
                                                                       </div>
                                                                       <div class="col-lg-3  col-sm-3 col-md-3 col-xs-3"><div class="input-group spinner" data-trigger="spinner">
                                                                           <input type="text" class="form-control text-right" value="0" data-rule="quantity" data-min="0" data-max="99">
                                                                     <span class="input-group-addon">
                                                                       <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                                       <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                                     </span>
                                                                       </div>
                                                                       </div>
                                                                       <div class="col-lg-5  col-sm-5 col-md-5 col-xs-5">
                                                                           <div class="input-group container-weight">
                                                                               <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="per Container">
                                                                               <div class="input-group-btn">
                                                                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs&nbsp;<span class="caret"></span></button>
                                                                                   <ul class="dropdown-menu weight-unit">
                                                                                       <li><a href="javascript:void(0);">KGs</a></li>
                                                                                       <li><a href="javascript:void(0);">Pounds</a></li>
                                                                                       <li><a href="javascript:void(0);">Tons</a></li>
                                                                                   </ul>
                                                                               </div>
                                                                               <div class="quote-error-message quote-error-message-layout">The weight exceeds container payload. Please enter the weight less than 25 Tons.</div>
                                                                           </div>
                                                                       </div>

                                                                   </div>
                                                                   <div class="row container-truck-info hidden">
                                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                           <div class="row">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                                   <div class="truck"><i class="fa fa-truck"></i></div>
                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                                   <div class="input-group oal-datepicker">
                                                                                       <input type="text" class="form-control date-time-box"  value="" placeholder="Available Timeline">
                                                                                <span class="input-group-addon">
                                                                                   <span class="required">*&nbsp;</span><span class="glyphicon glyphicon-calendar"></span>
                                                                               </span>
                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                               </div>
                                                                               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                                   <div class="input-group">
                                                                                       <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                       <input type="text" class="form-control" placeholder="Appointment Address" aria-describedby="basic-addon1">

                                                                                   </div>
                                                                               </div>
                                                                           </div>
                                                                           <div class="row truck-additional-info">
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="Load Reference">
                                                                               </div>
                                                                               <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                                   <input type="text" class="form-control" placeholder="DTQ Remarks">
                                                                               </div>

                                                                           </div>

                                                                       </div>
                                                                   </div>
                                                               </div>
                                                               <div class="col-lg-12 col-md-12 sm-12 booking-form-container" id="container_hq45">
                                                                   <div class="row header-row">
                                                                       <div class="col-lg-4  col-sm-4 col-md-4">
                                                                           <div class="container-type-icon text-center">
                                                                               <span class="oal-booking-container-type-title">45 HQ</span>
                                                                           </div>
                                                                           <div class="container-type-count">
                                                                               <i class="fa fa-times"></i>
                                                                           </div>
                                                                       </div>
                                                                       <div class="col-lg-3  col-sm-3 col-md-3">
                                                                           <div class="input-group spinner" data-trigger="spinner">
                                                                               <input type="text" class="form-control text-right" value="0" data-rule="quantity" data-min="0" data-max="99">
                                                                         <span class="input-group-addon">
                                                                           <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                                                           <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                                                         </span>
                                                                           </div>
                                                                       </div>
                                                                       <div class="col-lg-5  col-sm-5 col-md-5">
                                                                           <div class="input-group container-weight">
                                                                               <input type="text" class="input-large form-control oal-booking-container-number"   placeholder="per Container">
                                                                               <div class="input-group-btn">
                                                                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KGs <span class="caret"></span></button>
                                                                                   <ul class="dropdown-menu weight-unit">
                                                                                       <li><a href="javascript:void(0);">KGs</a></li>
                                                                                       <li><a href="javascript:void(0);">Pounds</a></li>
                                                                                       <li><a href="javascript:void(0);">Tons</a></li>
                                                                                   </ul>
                                                                               </div>
                                                                               <div class="quote-error-message quote-error-message-layout">The weight exceeds container payload. Please enter the weight less than 25 Tons.</div>
                                                                           </div>
                                                                       </div>

                                                                   </div>

                                                               </div>
                                                           </div>
                                                       </div>

                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-12 col-md-12 col-sm-12">
                                                           <div class="row row-special-requirement">
                                                               <label class="col-lg-4 col-md-4 col-sm-4 control-label">Special Equipment Requirement:</label>
                                                               <div class="col-lg-6 col-md-6 col-sm-6 field-special-requirement">
                                                                   <select class="form-control">
                                                                       <option value="">Select</option>
                                                                       <option>CDOF Container</option>
                                                                       <option>Dry and Clean Container</option>
                                                                   </select>
                                                               </div>
                                                               <div class="col-lg-2 col-md-2 col-sm-2">&nbsp;</div>
                                                           </div>
                                                       </div>


                                                   </div>

                                               </div>
                                               <div class="vessel-panel vessel-expand">
                                                   <div class="row">
                                                       <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12">
                                                           <div class="vessel-title">
                                                               <button id="search_vessel" type="button" class="btn btn-find-vessel" disabled>Get Available Vessel</button>
                                                           </div>

                                                       </div>
                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 booking-form-vessel-list">
                                                           <div class="row">
                                                               <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                                   <div class="booking-form-vessel-information vessel-warning-bg">
                                                                       <span class="vessel-name">OOCL HONGKONG 010E</span>
                                                                       <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                        <span class="vessel-eta">ETA at FND: 21/09</span>
                                                                        <div class="vessel-select-box">
                                                                            <label class="label-haulage"><input type="radio" name="rd_vessel" value="warning"></label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="booking-from-vessel-tabs">
                                                                        <div class="row">
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-ship"></i>
                                                                                <div class="icon-badge icon-badge-valid">
                                                                                    <i class="fa fa-check-circle"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-truck"></i>
                                                                                <div class="icon-badge icon-badge-error">
                                                                                    <i class="fa fa-minus-circle"></i>
                                                                                </div>
                                                                                <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                                    <p>Your currently specified loading time is later than the allowable AMS cutoff. Please amend to an earlier time to allow us to process your request.</p>
                                                                                </div>
                                                                                <div class="quote-message-box quote-message-box-layout">
                                                                                    <p>The haulage of your requested timeslot is tight. We will confirm the availability later or you can select another suggested timeslot below.</p>
                                                                                    <div class="box-field">
                                                                                        <div><label class="label-haulage"><input type="radio" name="rd_timeslot" value="ts1" checked>&nbsp;&nbsp;15 Oct 2016 14:00-18:00</label></div>
                                                                                        <div><label class="label-haulage"><input type="radio" name="rd_timeslot" value="ts2">&nbsp;&nbsp;Keep using 15 Oct 2016 09:00</label></div>
                                                                                    </div>
                                                                                    <div class="button-group"><a id="btn_confirm_time" class="btn btn-highlight" href="javascript:void(0);">Confirm</a></div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon icon-disabled text-center">
                                                                                <i class="fa fa-money"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                                    <div class="booking-form-vessel-information vessel-valid-bg">
                                                                        <span class="vessel-name">OOCL SHANGHAI 010E</span>
                                                                        <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                        <span class="vessel-eta">ETA at FND: 28/09</span>
                                                                        <div class="vessel-select-box">
                                                                            <label class="label-haulage"><input type="radio" name="rd_vessel" value="valid"></label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="booking-from-vessel-tabs">
                                                                        <div class="row">
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-ship"></i>
                                                                                <div class="icon-badge icon-badge-valid">
                                                                                    <i class="fa fa-check-circle"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-truck"></i>
                                                                                <div class="icon-badge icon-badge-valid">
                                                                                    <i class="fa fa-check-circle"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon icon-disabled text-center">
                                                                                <i class="fa fa-money"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                                    <div class="booking-form-vessel-information vessel-ext-payment-bg">
                                                                        <span class="vessel-name">OOCL QINGDAO 010E</span>
                                                                        <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                        <span class="vessel-eta">ETA at FND: 01/10</span>
                                                                        <div class="vessel-select-box">
                                                                            <label class="label-haulage"><input type="radio" name="rd_vessel" value="payment"></label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="booking-from-vessel-tabs">
                                                                        <div class="row">
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-ship"></i>
                                                                                <div class="icon-badge icon-badge-valid">
                                                                                    <i class="fa fa-check-circle"></i>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-truck"></i>
                                                                                <div class="icon-badge icon-badge-warning">
                                                                                    <i class="fa fa-exclamation-triangle"></i>
                                                                                </div>
                                                                                <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                                    <p>Unfortunately your selected vessel currently has limited space. Should you wish to keep this selection, one of our operatives will review your request.</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                                <i class="fa fa-money"></i>
                                                                                <div class="icon-badge icon-badge-warning">
                                                                                    <i class="fa fa-exclamation-triangle"></i>
                                                                                </div>
                                                                                <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                                    <p>Your currently selected vessel will incur extra demurrage beyond your free time.</p>
                                                                                </div>
                                                                                <div class="quote-message-box quote-message-box-layout">
                                                                                    <p class="text-center">Do you accept to pay extra dem?</p>
                                                                                    <div class="button-group"><a id="btn_accept_dem" class="btn btn-highlight" href="javascript:void(0);">Yes</a><a  id="btn_deny_dem" class="btn btn-default" href="javascript:void(0);">No</a> </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>





                                            <div class="row">
                                                <div class="col-lg-12 col-md-12 sm-12 search-group-border">
                                                    <div class="row other-information-title">
                                                        <div class="col-lg-11 col-md-11 sm-11">Supplement Other Information</div>
                                                        <div class="col-lg-1 col-md-1 col-sm-1 other-information-expand-collapse"><i class="fa fa-angle-double-down"></i></div>
                                                    </div>
                                                    <div class="row additional-information">
                                                        <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                        <label class="col-lg-3 col-md-3 col-sm-3 control-label">Shipper Reference:</label>
                                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                    </div>
                                                    <div class="row additional-information">
                                                        <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                        <label class="col-lg-3 col-md-3 col-sm-3 control-label">UCR Reference:</label>
                                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                    </div>
                                                    <div class="row additional-information">
                                                        <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                        <label class="col-lg-3 col-md-3 col-sm-3 control-label">VGM Reference:</label>
                                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                    </div>

                                                    <div class="row additional-information">
                                                        <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                        <label class="col-lg-3 col-md-3 col-sm-3 control-label">Inform this E-Mail:</label>
                                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                                            <input type="text" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                    </div>

                                                </div>

                                            </div>
                                        </form>

                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 text-center oal-form-page-action-bar">
                                        <a class="btn btn-default form-page-btn" href="booking.html">Reset</a>

                                        <button type="button" id="btnSearchBook" class="btn form-page-highlight-btn">Book</button>
                                    </div>
                                </div>

                            </div>
                            <div class="oal-preview-section">
                                <!--Create Booking -->
                                <form class="form-horizontal" role="form">
                                    <div class="row row-booking-party">
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="booking-party-group">
                                                <label class="control-label">Booking Party:</label>
                                                <div >
                                                    CPF ID: 123456778
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                            <div class="booking-party-group">
                                                <label class="control-label">&nbsp;</label>
                                                Company Name: abc Universe Logistics Company
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                        <div class="col-lg-5 col-md-5 col-sm-5">
                                            <label class="control-label">Agreement Number:</label>
                                            123456-4432-213
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 booking-info-group">
                                            <div class="row">
                                                <div class="col-lg-5 col-md-5 col-sm-5 booking-form-od-group">
                                                    Liverpool (GB)

                                                    <div class="booking-haulage-group text-right">
                                                        <label class="label-haulage">Door</label>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2">
                                                    <div class="booking-form-od-arrow-margin"></div>
                                                    <div class="oal-booking-preview-arrow-box"></div>
                                                </div>
                                                <div class="col-lg-5 col-md-5 col-sm-5 booking-form-od-group">
                                                    Hongkong (HK)
                                                    <div class="booking-haulage-group text-right">
                                                        <label class="label-haulage">CY</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                    <div class="booking-form-row-margin">
                                                        <label class="control-label">Cargo Nature: </label> General
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                                <div class="col-lg-5 col-md-5 col-sm-5">
                                                    <div class="booking-form-row-margin">
                                                        <label class="control-label text-nowrap">Contract Commodity:</label>Scrap metal / General
                                                        <label class="control-label text-nowrap">Booking Commodity:</label>Scrap metal / General

                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="row row-container-vessel">
                                        <div class="container-panel container-collapsed">

                                            <div class="row">
                                                <div class="col-lg-12 col-md-12 sm-12 container-list">
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-sm-6 booking-form-container">
                                                            <div class="row header-row">
                                                                <div class="col-lg-4  col-sm-4 col-md-4">
                                                                    <div class="container-type-icon text-center">
                                                                        <span class="oal-booking-container-type-title">20 GP</span>
                                                                    </div>
                                                                    <div class="container-type-count">
                                                                        <i class="fa fa-times"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-3  col-sm-3 col-md-3">
                                                                    <div class="input-group spinner" data-trigger="spinner">
                                                                        2
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-5  col-sm-5 col-md-5">
                                                                    <div class="input-group container-weight">
                                                                        6000 KGs per container
                                                                    </div>

                                                                </div>

                                                            </div>
                                                            <div class="row container-truck-info">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="row">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                            <div class="truck"><i class="fa fa-truck"></i></div>
                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                            <div class="input-group oal-datepicker">
                                                                                14 Oct, 2016
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                            <div class="input-group">
                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                SSP park #5, Tangjia Zhuhai

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            LR00215
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            DTQ2568
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                            <div class="row container-truck-info">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="row">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                            <div class="truck"><i class="fa fa-truck"></i></div>
                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                            <div class="input-group oal-datepicker">
                                                                                14 Oct, 2016
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                            <div class="input-group">
                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                SSP park #5, Tangjia Zhuhai

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            LR00215
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            DTQ2568
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-sm-6 booking-form-container">
                                                            <div class="row header-row">
                                                                <div class="col-lg-4  col-sm-4 col-md-4">
                                                                    <div class="container-type-icon text-center">
                                                                        <span class="oal-booking-container-type-title">40 GP</span>
                                                                    </div>
                                                                    <div class="container-type-count">
                                                                        <i class="fa fa-times"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-3  col-sm-3 col-md-3">
                                                                    <div class="input-group spinner" data-trigger="spinner">
                                                                        2
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-5  col-sm-5 col-md-5">
                                                                    <div class="input-group container-weight">
                                                                        8000 KGs per container
                                                                    </div>

                                                                </div>

                                                            </div>
                                                            <div class="row container-truck-info">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="row">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                            <div class="truck"><i class="fa fa-truck"></i></div>
                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                            <div class="input-group oal-datepicker">
                                                                                14 Oct, 2016
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                            <div class="input-group">
                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                SSP park #5, Tangjia Zhuhai

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            LR00215
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            DTQ2568
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                            <div class="row container-truck-info">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="row">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                            <div class="truck"><i class="fa fa-truck"></i></div>
                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                            <div class="input-group oal-datepicker">
                                                                                14 Oct, 2016
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                            <div class="input-group">
                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                SSP park #5, Tangjia Zhuhai

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            LR00215
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            DTQ2568
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                            <div class="row container-truck-info">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="row">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                            <div class="truck"><i class="fa fa-truck"></i></div>
                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info" >
                                                                            <div class="input-group oal-datepicker">
                                                                                14 Oct, 2016
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">

                                                                        </div>
                                                                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 booking-door-info">
                                                                            <div class="input-group">
                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                                SSP park #5, Tangjia Zhuhai

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row truck-additional-info">
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 text-right">
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            LR00215
                                                                        </div>
                                                                        <div class="col-lg-4  col-sm-4 col-md-4 booking-door-info">
                                                                            DTQ2568
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row row-special-requirement">
                                                <label class="col-lg-4 col-md-4 col-sm-4 control-label">Special Equipment Requirement:</label>
                                                <div class="col-lg-6 col-md-6 col-sm-6">
                                                    <div class="col-lg-6 col-md-6 col-sm-6">Dry and Clean Container
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2">&nbsp;</div>
                                            </div>
                                        </div>
                                        <div class="vessel-panel vessel-expand">
                                            <div class="row">
                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 booking-form-vessel-list">
                                                    <div class="row">
                                                        <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 vessel-title">Vessel:</div>
                                                        <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                            <div class="booking-form-vessel-information vessel-warning-bg">
                                                                <span class="vessel-name">OOCL HONGKONG 010E</span>
                                                                <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                <span class="vessel-eta">ETA at FND: 21/09</span>
                                                                <div class="vessel-select-box">
                                                                    <label class="label-haulage"><input type="radio" name="rd_vessel" value="warning"></label>
                                                                </div>
                                                            </div>
                                                            <div class="booking-from-vessel-tabs">
                                                                <div class="row">
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-ship"></i>
                                                                        <div class="icon-badge icon-badge-valid">
                                                                            <i class="fa fa-check-circle"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-truck"></i>
                                                                        <div class="icon-badge icon-badge-error">
                                                                            <i class="fa fa-minus-circle"></i>
                                                                        </div>
                                                                        <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                            <p>Your currently specified loading time is later than the allowable AMS cutoff. Please amend to an earlier time to allow us to process your request.</p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon icon-disabled text-center">
                                                                        <i class="fa fa-money"></i>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                            <div class="booking-form-vessel-information vessel-valid-bg">
                                                                <span class="vessel-name">OOCL SHANGHAI 010E</span>
                                                                <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                <span class="vessel-eta">ETA at FND: 28/09</span>
                                                                <div class="vessel-select-box">
                                                                    <label class="label-haulage"><input type="radio" name="rd_vessel" value="valid"></label>
                                                                </div>
                                                            </div>
                                                            <div class="booking-from-vessel-tabs">
                                                                <div class="row">
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-ship"></i>
                                                                        <div class="icon-badge icon-badge-valid">
                                                                            <i class="fa fa-check-circle"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-truck"></i>
                                                                        <div class="icon-badge icon-badge-valid">
                                                                            <i class="fa fa-check-circle"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon icon-disabled text-center">
                                                                        <i class="fa fa-money"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 booking-form-vessel">
                                                            <div class="booking-form-vessel-information vessel-ext-payment-bg">
                                                                <span class="vessel-name">OOCL QINGDAO 010E</span>
                                                                <span class="vessel-origin-destination">Liverpool ----> Hongkong</span>
                                                                <span class="vessel-eta">ETA at FND: 01/10</span>
                                                                <div class="vessel-select-box">
                                                                    <label class="label-haulage"><input type="radio" name="rd_vessel" value="payment"></label>
                                                                </div>
                                                            </div>
                                                            <div class="booking-from-vessel-tabs">
                                                                <div class="row">
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-ship"></i>
                                                                        <div class="icon-badge icon-badge-valid">
                                                                            <i class="fa fa-check-circle"></i>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-truck"></i>
                                                                        <div class="icon-badge icon-badge-warning">
                                                                            <i class="fa fa-exclamation-triangle"></i>
                                                                        </div>
                                                                        <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                            <p>Unfortunately your selected vessel currently has limited space. Should you wish to keep this selection, one of our operatives will review your request.</p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-4 vessel-tabs-icon text-center">
                                                                        <i class="fa fa-money"></i>
                                                                        <div class="icon-badge icon-badge-warning">
                                                                            <i class="fa fa-exclamation-triangle"></i>
                                                                        </div>
                                                                        <div class="quote-vessel-validation quote-vessel-validation-layout">
                                                                            <p>Your currently selected vessel will incur extra demurrage beyond your free time.</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>





                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 sm-12 search-group-border">
                                            <div class="row other-information-title">
                                                <div class="col-lg-11 col-md-11 sm-11">Other Information</div>
                                                <div class="col-lg-1 col-md-1 col-sm-1 other-information-expand-collapse"><i class="fa fa-angle-double-down"></i></div>
                                            </div>
                                            <div class="row additional-information">
                                                <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                <label class="col-lg-3 col-md-3 col-sm-3 control-label">Shipper Reference:</label>
                                                <div class="col-lg-6 col-md-6 col-sm-6">
                                                    OOCL998498234092
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                            </div>


                                            <div class="row additional-information">
                                                <div class="col-lg-1 col-md-1 col-sm-1"></div>
                                                <label class="col-lg-3 col-md-3 col-sm-3 control-label">Inform this E-Mail:</label>
                                                <div class="col-lg-6 col-md-6 col-sm-6">
                                                    demo_user@oocl.com
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-2"></div>
                                            </div>

                                        </div>

                                    </div>
                                </form>



                            </div>
                        </div>


                    </div>

                </div>
        </div>



    </div>

    <!-- Chat -->
</div>


<!--include JS File -->
<script src="../../common/js/jquery-1.12.4.js"></script>
<script src="../../common/js/bootstrap.js"></script>
<script src="../../common/js/dateRangePicker/moment.js"></script>
<script src="../../common/js/dateRangePicker/jquery.daterangepicker.js"></script>
<script src="../../common/js/bootstrap.typeahead.js"></script>
<script src="../../common/js/icheck.js"></script>
<script src="../../common/js/jquery.spinner.min.js"></script>
<script src="../../common/js/sweetalert.min.js"></script>
<script src="../../common/js/bootstrap-combobox.js"></script>
<script src="../controler/booking.js"></script>


</body>


</html>